<template>
  <div class="app-container">
    <div class="SearchTop accountInfo">
      <div class="comboTop">
        <p>{{ tenantName }}</p>
        <p>管理账号可用：<span>{{ manageUserNum }}</span>/<span>{{ UserNumTotal }}</span>个</p>
        <p>当前用户数：{{ appUserNum }}人</p>
        <p>服务版本：{{ serviceVer }}</p>
      </div>
    </div>
    <div class="tableList">
      <el-table :data="tableData" v-loading="loading" style="width: 100%" border class="table-container" stripe
                align="center">
        <el-table-column label="序号" width="60" type="index"></el-table-column>
        <template v-for="(item, index) in tableHead" :key="index">
          <el-table-column :prop="item.dataIndex" :label="item.title" :align="center" show-overflow-tooltip>
          </el-table-column>
          ss
        </template>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                  v-model:limit="queryParams.pageSize" @pagination="getList"/>
    </div>
  </div>
</template>
<script setup>
import {serviceInfo} from '@/api/tenant/tenant'

const {proxy} = getCurrentInstance();
const loading = ref(true);
const total = ref(0);
const tenantName = ref(undefined);
const serviceVer = ref(undefined);
const appUserNum = ref(undefined);
const manageUserNum = ref(undefined)
const UserNumTotal = ref(undefined)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  tableHead: [
    {
      dataIndex: 'name',
      title: '软件版本',

    },

    {
      dataIndex: 'type_dictText',
      title: '商品类型',

    },
    {
      dataIndex: 'buyDuration',
      title: '购买时长',

    },
    {
      dataIndex: 'cost',
      title: '费用',

    },
    {
      dataIndex: 'expiredTime',
      title: '到期时间',

    },

  ],
  tableData: []
});

const {queryParams, tableHead, tableData} = toRefs(data);

function getList() {
  loading.value = true;
  serviceInfo().then(res => {
    console.log('服务信息', res)
    if (res.code == 200) {
      tableData.value = res.data.comboInfos;
      tenantName.value = res.data.tenantName
      serviceVer.value = res.data.serviceVer
      appUserNum.value = res.data.appUserNum
      if (res.data.manageUserNum) {
        let account = res.data.manageUserNum.split('/')
        manageUserNum.value = account[0]
        UserNumTotal.value = account[1]
      }
      loading.value = false;
    }

  })
}

getList()
</script>
<style lang="scss" scoped>
.comboTop {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 400;
  color: #333;

  p {
    padding: 1% 3%;

    span {
      font-size: 26px;
    }
  }
}
</style>
